<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataPost()"
      class="formSearch"
    >
      <el-form-item
        label="流量计:"
        v-show="choseId === 0 || choseId === 1 || choseId === 2"
      >
        <el-select
          size="mini"
          v-model="dataForm.equipmentId"
          placeholder="选择流量计"
          filterable
        >
          <el-option
            v-for="(item, index) in stationOptions"
            :key="index"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日期:">
        <el-date-picker
          size="mini"
          v-model="dataForm.time"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="getDataPost()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 每日汇总 -->
    <el-tabs tab-position="left" @tab-click="tabGet" class="tabPart">
      <el-tab-pane label="调度中心压力数据">
        <pagepress v-if="pressVisible" ref="pagepress" />
      </el-tab-pane>
      <el-tab-pane label="调度中心流量数据">
        <pageflow v-if="flowVisible" ref="pageflow" />
      </el-tab-pane>
      <el-tab-pane label="调度中心电量数据">
        <pageelectricity v-if="electricityVisible" ref="pageelectricity" />
      </el-tab-pane>
      <el-tab-pane label="西江水厂数据">
        <pagexj v-if="xjVisible" ref="pagexj" />
      </el-tab-pane>
      <el-tab-pane label="丹灶泵站数据">
        <pagedanzao v-if="danzaoVisible" ref="pagedanzao" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import moment from "moment";
import pagepress from "./state-press";
import pageelectricity from "./state-electricity";
import pageflow from "./state-flow";
import pagexj from "./state-xj";
import pagedanzao from "./state-danzao";
export default {
  data() {
    return {
      pressVisible: false, // 调度中心压力数据
      flowVisible: false, // 调度中心流量数据
      electricityVisible: false, // 调度中心电量数据
      xjVisible: false, // 西江水厂数据
      danzaoVisible: false, // 丹灶泵站数据
      choseId: 0,
      dataForm: {
        equipmentId: null,
        time: [
          moment(new Date()).format("YYYY-MM-DD"),
          moment(new Date()).format("YYYY-MM-DD")
        ]
      },
      nowTabsNum: 0, // 当前选中的tab index
      stationOptions: []
    };
  },
  components: {
    pagepress,
    pageelectricity,
    pageflow,
    pagexj,
    pagedanzao
  },
  mounted() {
    this.getStationOption();
  },
  activated() {
    this.getDataPost();
  },
  methods: {
    // tab切换判断
    tabGet(data) {
      this.nowTabsNum = data.index; // 赋值切换的index值
      this.getCheckdata(this.nowTabsNum);
    },
    // 默认进入显示页面
    getDataPost() {
      this.getCheckdata(this.nowTabsNum);
    },
    // 获取泵站信息
    getStationOption() {
      this.$http({
        url: this.$http.adornUrl(`/cms/tbEquipment/combo`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.stationOptions = data.list.filter(item => item.type === 1);
          // this.stationOptions = data.list
        } else {
          this.stationOptions = [];
        }
      });
    },
    // 判断数据
    getCheckdata(data) {
      this.choseId = parseInt(data);
      if (data === "0" || data === 0) {
        // 压力
        this.pressVisible = true;
        this.flowVisible = false;
        this.electricityVisible = false;
        this.xjVisible = false;
        this.danzaoVisible = false;
        this.$nextTick(() => {
          this.$refs.pagepress.init(
            this.dataForm.time,
            this.dataForm.equipmentId,
            1
          );
        });
      } else if (data === "1" || data === 1) {
        // 流量
        this.pressVisible = false;
        this.flowVisible = true;
        this.electricityVisible = false;
        this.xjVisible = false;
        this.danzaoVisible = false;
        this.$nextTick(() => {
          this.$refs.pageflow.init(
            this.dataForm.time,
            this.dataForm.equipmentId,
            1
          );
        });
      } else if (data === "2" || data === 2) {
        // 电量
        this.pressVisible = false;
        this.flowVisible = false;
        this.electricityVisible = true;
        this.xjVisible = false;
        this.danzaoVisible = false;
        this.$nextTick(() => {
          this.$refs.pageelectricity.init(
            this.dataForm.time,
            this.dataForm.equipmentId,
            1
          );
        });
      } else if (data === "3" || data === 3) {
        // 西江数据
        this.pressVisible = false;
        this.flowVisible = false;
        this.electricityVisible = false;
        this.xjVisible = true;
        this.danzaoVisible = false;
        this.$nextTick(() => {
          this.$refs.pagexj.init(this.dataForm.time, null, 1);
        });
      } else if (data === "4" || data === 4) {
        // 丹灶数据
        this.pressVisible = false;
        this.flowVisible = false;
        this.electricityVisible = false;
        this.xjVisible = false;
        this.danzaoVisible = true;
        this.$nextTick(() => {
          this.$refs.pagedanzao.init(this.dataForm.time, null, 1);
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.tabPart ::v-deep {
  .el-tabs__content {
    height: 100%;
  }
}
</style>
